import React, { useEffect, useState } from 'react'
import { Tabs, Affix, ColorPicker } from 'antd';
import { Qhlhb } from '../Qhlhb'
import { QQlhb } from '../QQlhb'
import { FarstLink } from '../FarstLink'
import { colorConfig, } from '../../utils'
import { Otherlhb } from '../Otherlhb'
import { QQMain } from '../QQMain'
import { FarstLinkQQ } from '../FarstLinkQQ'
import "./index.less";
const defalutActive = 'qqcall'
const Index = () => {
    const [bottom, setBottom] = React.useState(500);
    const [value, setValue] = useState(colorConfig.red);
    const [valueLess, setValueLess] = useState(colorConfig.green);
    console.log("valueLess", valueLess)
    const items = [

        {
            key: 'qqcall',
            label: '期权call',
            children: <QQMain colorConfig={
                {
                    red: value,
                    green: valueLess
                }
            } type='call' />,
        },
        {
            key: 'qqput',
            label: '期权put',
            children: <QQMain colorConfig={
                {
                    red: value,
                    green: valueLess
                }
            } type='put' />,
        },
        {
            key: 'QQt',
            label: '市场行情_期权报价',
            children: <FarstLinkQQ></FarstLinkQQ>,
        },

        , {
            key: '1',
            label: '期货龙虎榜',
            children: <Qhlhb colorConfig={
                {
                    red: value,
                    green: valueLess
                }
            }></Qhlhb>,
        },
        {
            key: '2',
            label: '期权龙虎榜',
            children: <QQlhb colorConfig={
                {
                    red: value,
                    green: valueLess
                }
            }></QQlhb>,
        },
        {
            key: '3',
            label: '龙虎榜详情',
            children: <FarstLink></FarstLink>,
        },
        {
            key: '4',
            label: '自定义查询龙虎榜',
            children: <Otherlhb colorConfig={
                {
                    red: value,
                    green: valueLess
                }
            }></Otherlhb>,
        },
    ];
    return <div>
        {/* <Affix offsetTop={bottom}>
            <div className='affix' onClick={() => {
                window.location.reload()
            }}>
                刷新网页
            </div>
        </Affix> */}
        色值调整
        <ColorPicker
            value={value}
            onChangeComplete={(color) => {
                setValue(color.toHexString());
            }}
        />
        <ColorPicker
            value={valueLess}
            onChangeComplete={(color) => {
                setValueLess(color.toHexString());
            }}
        />

        <Tabs defaultActiveKey={defalutActive} items={items} />;
    </div>
}

export default Index